<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>java从入门到实战总结</title>
    <style>
        .userMenu {
            float: left;
            width: 200px;
            padding-top: 50px;

        }

        #content {
            float: left;
        }
    </style>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
    <div class="userWrap">
        <ul class="userMenu">
            <li class="current" data-id="1.1"><a>1.1、Java基础之环境搭建和eclipse安装</a></li>
            <li data-id="1.2"><a>1.2、Java基础语法</a></li>
            <li data-id="1.3"><a>1.3、Java流程控制</a></li>
            <li data-id="1.4"><a>1.4、Java数组</a></li>
            <li data-id="1.5"><a>1.5、快乐E栈项目实战第一阶段</a></li>
            <li data-id="2.1"><a>2.1、Java面向对象基础</a></li>
            <li data-id="2.2"><a>2.2、Java面向对象进阶</a></li>
        </ul>
        <div id="content"></div>
    </div>

    <script>
        $(function() {
            $(".userMenu").on("click", "li", function() {
                var sId = $(this).data("id"); //获取data-id的值
                window.location.hash = sId; //设置锚点
                loadInner(sId);
            });

            function loadInner(sId) {
                var sId = window.location.hash;
                var pathn, i;
                switch(sId) {
                    case "#1.1":
                        pathn = "java_1.1.html";
                        i = 0;
                        break;
                    case "#1.2":
                        pathn = "java_1.2.html";
                        i = 1;
                        break;
                    case "#1.3":
                        pathn = "java_1.3.html";
                        i = 2;
                        break;
                    case "#1.4":
                        pathn = "java_1.4.html";
                        i = 3;
                        break;
                    case "#1.5":
                        pathn = "java_1.5.html";
                        i = 4;
                        break;
                    case "#2.1":
                        pathn = "java_2.1.html";
                        i = 5;
                        break;
                    case "#2.2":
                        pathn = "java_2.2.html";
                        i = 6;
                        break;
                    default:
                        pathn = "java_1.1.html";
                        i = 0;
                        break;
                }
                $("#content").load(pathn); //加载相对应的内容
                $(".userMenu li").eq(i).addClass("current").siblings().removeClass("current"); //当前列表高亮
            }
            var sId = window.location.hash;
            loadInner(sId);
        });
    </script>
</body>
</html>